<template>
	<view>
		<view class="bg-white search grid col-1">
			<view class="solid-bottom margin-top-sm">
				<view class="flex p-xs margin-bottom-sm mb-sm">
					<view class="flex-twice flex justify-around">
						<view @click="sortBy('score')">
							<text>综合</text>
						</view>
						<view @click="sortBy('sales', sales_icon)">
							<text>销量</text><text :class="'cuIcon-' + sales_icon"></text>
						</view>
					</view>
					<view class="flex-sub flex justify-around">
						<view style="padding-top: 5upx;" @click="sortBy('deploy', deploy_icon)">
							<text :class="'cuIcon-' + deploy_icon"></text>
						</view>
						|
						<view @click="sortBy('filter')">
							<text>筛选</text><text class="cuIcon-filter"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 右边抽屉 -->
		<view class="cu-modal drawer-modal justify-end" :class="is_show?'show':''">
			<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
				<view class="cu-list menu text-left bg-white" style="height: 100%;width: 100%;">
					<form>
						<view style="margin-top: 88upx;height: 100%;width: 100%;padding-left: 21upx;">
							<view class="title text-black margin-bottom-sm padding-left-xs">价格区间</view>
							<view class="flex justify-center margin-bottom-sm">
								<input placeholder="最低价" class="sm-border radius roud-input" name="input"></input>
								<text style="line-height: 58upx;height: 58upx;" class="padding-lr">-</text>
								<input placeholder="最高价" class="sm-border radius roud-input" name="input"></input>
							</view>
						</view>
					</form>
		
					<view class="ui-tabbar-view-box flex justify-center margin-bottom-xl">
						<button class="cu-btn line-black margin-lr-sm padding-lr-xl">重置</button>
						<button class="cu-btn bg-black margin-left-xs padding-lr-xl"  @tap="hideTap">确定</button>
					</view>
				</view>
			</view>
		</view>
		
		<view class="goods-list-box" :class="goods_top_bg ? 'goods_banner_top' : ''">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<scroll-view scroll-y="true" class="sv" style="height:100%">
					<!--商品列表-->
					<view class="bg-white ui-search-list-view" v-if="goods_lists.length > 0">
						<goods-sort-list :list_data="goods_lists" @listTap="goodsInfo" v-if="deploy_icon == 'apps'"></goods-sort-list>
						<goods-grid-list :list_data="goods_lists" @listTap="goodsInfo" v-if="deploy_icon == 'list'"></goods-grid-list>
					</view>
				</scroll-view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import goodsSortList from '@/components/goods/goods-sort-list';
	import goodsGridList from '@/components/goods/goods-grid-list';

	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import _tool from '@/utils/tools.js'; //工具函数
	export default {
		mixins: [MescrollMixin],
		components: {
			goodsSortList,
			goodsGridList,
		},
		data() {
			return {
				is_show: false,
				deploy_icon: 'list',
				sales_icon: 'triangledownfill',
				icon_type: '',
				goods_type: 2,
				goods_top_bg: '',
				shareTitle: '',
				shareImage: '',
				CustomBar: this.CustomBar,
				sharePath: '/pages/goods/lists',
				upOption: {
					page: {
						size: 10
					},
					noMoreSize: 5,
					empty: {
						tip: '没有更多了'
					}
				},
				goods_lists: [],
				category_id: 0,
				fields: [{
						label: "综合",
						is_icon: 0,
						icon_o: '',
						icon: ''
					},
					{
						label: "销量",
						is_icon: 0,
						icon_o: 'triangledownfill',
						icon: 'triangleupfill'
					},
					{
						label: "宫格",
						is_icon: 0,
						icon_o: 'apps',
						icon: 'list'
					},
					{
						label: "筛选",
						is_icon: 0,
						icon_o: 'filter',
						icon: 'filter',
					},
				],
			}
		},
		onLoad(option) {
			var params = {};
			if (option !== undefined) {
				this.goods_type = option.goods_type;
				params = {
					page_type: 'goods_lists',
					goods_type: option.goods_type,
				}
				if(option.category_id !== undefined){
					this.category_id = option.category_id;
				}
				if(option.category_name !== undefined){
					uni.setNavigationBarTitle({
						title: option.category_name
					})
				}
			}
		},
		onShareAppMessage(res) {
			return {
				title: this.shareTitle,
				path: this.sharePath,
				imageUrl: this.shareImage,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			sortBy(type, sort = '') {
				this.tooltip = false;
				if (type == 'filter') {
					if (this.icon_type == 'filter') {
						this.icon_type = '';
					} else {
						this.icon_type = 'filter';
					}
					this.is_show = true;
					return false;
				}
			
				if (type == 'sales') {
					if (sort == 'triangledownfill') {
						this.sales_icon = 'triangleupfill';
					} else {
						this.sales_icon = 'triangledownfill';
					}
					return false;
				}
			
				if (type == 'score') {
			
					return false;
				}
			
				if (type == 'deploy') {
					if (sort == 'apps') {
						this.deploy_icon = 'list';
					} else {
						this.deploy_icon = 'apps';
					}
					return false;
				}
			
			},
			hideTap(){
				this.is_show = false;
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				this.$Http.get('/goods/lists?type=1&pageNum=' + page.num + '&pageSize=' + page.size +
					'&goods_type=' + this.goods_type + '&category_id=' + this.category_id).then(res => {
					if (page.num == 1) this.goods_lists = [];
					this.goods_lists = this.goods_lists.concat(res.lists);
					this.mescroll.endSuccess(res.lists.length);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			BackPage() {
				uni.navigateBack();
			},
			goodsInfo(e) {
				uni.navigateTo({
					url: "/pages/goods/detail?goods_id=" + e.data.goods_id
				});
			}
		}
	}
</script>

<style lang="scss">
	.goods-list-bg {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 9999;
		height: 100px;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}

	.goods_banner_top{
		margin-top: 80upx;
	}

	.ui-tabbar-view-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.search {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 9999;
	}

	.goods-list-box {
		margin-top: 82upx;
	}

	.roud-input {
		width: 185upx;
		border: 3upx solid #e6e6e6;
		border-radius: 38upx;
		height: 64upx;
		padding: 3upx 26upx;
		line-height: 58upx;
	}

	.ui-tabbar-view-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.wrapper {
		position: relative;
		display: inline-block;
	}
	
	.wrapper_show {
		visibility: hidden;
	}

	.wrapper .tooltip {
		width: 100px;
		background-color: #555;
		color: #fff;
		border-radius: 6px;
		padding: 5px 0;
		text-align: center;
		position: absolute;
		z-index: 1;
		top: 135%;
		left: 50%;
		transition: opacity 1s;
	}

	.wrapper .tooltip::after {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 50%;
		margin-left: -45px;
		border-width: 5px;
		border-style: solid;
		border-color: transparent transparent #555 transparent;
	}
	@import "../../static/style/sort_list.scss";
</style>
